<template>
  <div v-if="statusData.length > 0" class="filter-wrap">
    <div class="filter-wrap__left">
      <status-wrap
        v-model:status-code="currentStatus"
        :status-data="statusData"
        v-bind="$attrs"
        @search="changeStatus"
      />
    </div>
    <div class="filter-wrap__right">
      <div>
        <search-form v-bind="$attrs" @search="search" />
      </div>
      <refresh-btn @refresh="refresh" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, PropType } from 'vue'

import RefreshBtn from '@/components/CommonSearch/RefreshBtn/index.vue'
import StatusWrap from '@/components/CommonSearch/StatusWrap/index.vue'
import SearchForm from './SearchForm.vue'

import IBaseObj from '#/index'

const props = defineProps({
  statusData: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
  statusCode: {
    type: [String, Number],
    default: '',
  },
})

const emits = defineEmits(['update:status-code', 'search', 'refresh', 'change-status'])

/* status start */
const currentStatus: any = computed({
  get() {
    return props.statusCode
  },
  set(val) {
    emits('update:status-code', val)
  },
})

const search = () => {
  emits('search')
}

const changeStatus = () => {
  emits('change-status')
}

const refresh = () => {
  emits('refresh')
}

/* status end */
</script>

<style lang="scss" scoped>
.filter-wrap {
  display: flex;
  // line-height: 40px;
  height: 44px;
  // padding: 0 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--table-border);
  align-items: center;
  justify-content: space-between;

  &__left {
    display: flex;
    font-size: 16px;
    flex: 1;
    flex-shrink: 0;
  }

  &__right {
    display: flex;

    :deep(.el-dropdown) {
      margin-left: 20px;
    }
  }
}

.status {
  &--num {
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    background: #c8e4ff;
    border-radius: 6px;
  }
}
</style>
